<template>
    <div>
        <div class="block-container">
            <div class="block">

                <el-form ref="searchForm" :model="searchForm" label-width="80px" >
                    <div class="top-div">
                        <el-form-item label="姓名">
                            <el-input v-model="searchForm.name"></el-input>
                        </el-form-item>
                        <el-form-item label="手机">
                            <el-input v-model="searchForm.telephone"></el-input>
                        </el-form-item>
                        <el-form-item label="地址">
                            <el-input v-model="searchForm.address"></el-input>
                        </el-form-item>
                        <el-form-item label="状态">
                            <el-select v-model="searchForm.status" placeholder="全部">
                                <el-option label="封禁" value="false"></el-option>
                                <el-option label="启用" value="true"></el-option>
                            </el-select>
                        </el-form-item>

                        <el-date-picker
                                v-model="value"
                                type="datetimerange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                style="margin-left: 20px"
                        />
                        <div style="display: flex;justify-content: space-between">
                            <el-form-item>
                                <el-button type="primary" @click="onSubmit">搜索</el-button>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="addRetailer">添加</el-button>
                            </el-form-item>
                        </div>


                    </div>
                   <div class="btn-wrap">

                   </div>

                </el-form>
            </div>

            <div class="block-bottom">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage4"
                        :page-sizes="[5, 10, 20, 30]"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="totalNum">
                </el-pagination>
            </div>
        </div>

        <div class="table-box">
            <el-table
                    :data="pageData"
                    border
                    style="width: 100%">
                <el-table-column
                        fixed
                        align="center"
                        type="index"
                        label="序号"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="姓名"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="telephone"
                        label="手机号"
                        width="230">
                </el-table-column>
                <el-table-column
                        prop="address"
                        label="地址"
                        width="230">
                </el-table-column>
                <el-table-column
                        label="状态"
                        width="120">
                    <template slot-scope="scope">
                        <el-switch
                                v-model=scope.row.status
                                active-color="#13ce66"
                                inactive-color="#ff4949"
                                @change="changeStatus(scope.row)">

                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="createTime"
                        label="创建日期"
                        width="250">
                </el-table-column>
                <el-table-column
                        fixed="right"
                        label="操作"
                        width="100">
                    <template slot-scope="scope">
                        <el-button @click="editRetailer(scope.row,scope.$index)" type="text" size="small">编辑</el-button>
                        <el-button type="text" size="small" @click="deleteRetailer(scope.row.retailerId)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <!--查看或编辑对话框-->
        <el-dialog
                title="修改信息"
                :visible.sync="dialogVisible"
                width="30%"
                :before-close="handleClose">
           <div>
               <el-form ref="rowDataForm" :model="rowData" label-width="80px" :rules="rules">
                   <el-form-item label="姓名" prop="name">
                       <el-input v-model="rowData.name"></el-input>
                   </el-form-item>
                   <el-form-item label="手机" prop="telephone">
                       <el-input v-model="rowData.telephone"></el-input>
                   </el-form-item>
                   <el-form-item label="地址" prop="address">
                       <el-input v-model="rowData.address"></el-input>
                   </el-form-item>
               </el-form>
           </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitEdit">确 定</el-button>
            </span>
        </el-dialog>
        <!--添加对话框-->
        <el-dialog
                title="添加人员"
                :visible.sync="addVisible"
                width="30%"
                :before-close="handleClose">
            <div>
                <el-form ref="addDataForm" :model="addData" label-width="80px" :rules="rules">
                    <el-form-item label="姓名" prop="name">
                        <el-input v-model="addData.name"></el-input>
                    </el-form-item>
                    <el-form-item label="手机" prop="telephone">
                        <el-input v-model="addData.telephone"></el-input>
                    </el-form-item>
                    <el-form-item label="地址" prop="address">
                        <el-input v-model="addData.address"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitAdd">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import {addRetailer, deleteRetailer, editRetailer, selectAllData, selectAllNums} from "../api/require";
    import {validatePhone} from "../utils/util";

    export default {
        name: "SalesModel",
        data() {
            return {
               searchForm:{
                   name:'',
                   telephone:'',
                   address:'',
                   status:'',
                   createTime:'',
                   startPage:'0',
                   pageSize:'10',
                   startTime:'',
                   endTime:'',
               },
                addData:{
                    name:'',
                    telephone:'',
                    address:'',
                    status:true,
                    createTime:'',
                    startPage:'0',
                    pageSize:'10',
                    startTime:'',
                    endTime:'',
                },
                totalNum:10,
                currentPage4: 1,//当前页码
                value: '',//查询日期
                pageData:[],//数据
                dialogVisible: false,//对话框的显示
                rowData:{},
                rules: {
                    name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
                    address: [{ required: true, message: '请输入地址', trigger: 'blur' }],
                    telephone: [{ validator: validatePhone, trigger: 'blur' }],
                },
                dataIndex:0,//操作的行数
                addVisible:false,//tianjia
            };
        },
        created() {
           this.getNums();
           this.getPageData();

        },
        methods:{
          /**增*/
            //添加
            addRetailer(){
                console.log("添加用户");
                this.addVisible = true
            },
            //添加用户
            submitAdd(){
                this.$refs.addDataForm.validate((valid)=> {
                    if (valid) {
                        addRetailer(this.addData).then(res=>{
                            if (res.data.code === 200){
                                this.$message({message:"添加成功",type:'success'});
                                this.getNums()
                                this.getPageData()
                            }else{
                                this.$message({message:"添加失败",type:'success'})
                            }
                            this.resetAddForm()
                            this.addVisible = false;
                        })
                    }else{
                        this.$message({message:'数据格式有误',type:"error"})
                    }
                })

            },
            /**删*/
            //删除用户
            deleteRetailer(id){
                console.log("要删除的id",id)
                this.$confirm("确定删除？").then(res=>{
                    /*删除*/
                    console.log('删除')
                    deleteRetailer(id).then(res=>{
                        if (res.data.code === 200){
                            this.$message({message:"删除成功",type:'success'})
                            this.getNums();
                            this.getPageData();
                        }else{
                            this.$message({message:"删除失败",type:"error"})
                        }
                    }).catch(_=>{
                        this.$message({message:"系统有误",type:"error"})
                    })
                }).catch(_=>{})

            },
            /**改*/
            //编辑用户
            editRetailer(row,index) {
                console.log("用户信息",row,index);
                this.dialogVisible = true;
                this.rowData = row;
                this.dataIndex = index;

            },
            //修改提交
            submitEdit(){

                this.$refs.rowDataForm.validate((valid)=>{
                   if (valid){
                       editRetailer(this.rowData).then(res=>{
                           console.log("修改返回的消息",res)
                           if (res.data.code === 200){
                               this.$message({message:"修改成功",type:'success'});
                               this.$set(this.pageData[this.dataIndex],this.rowData)
                           }else{
                               this.$message({message:"修改失败",type:'success'})
                           }
                            this.rowData = {}
                            this.dialogVisible = false;
                       }).catch(err=>{
                           this.$message({message:"系统错误",type:"error"})
                       })
                   }else{
                       this.$message({message:"数据格式有误",type:'error'});
                   }
                })
            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            },
            //查询按钮
            onSubmit(){
                this.searchForm.startTime=this.value ? this.value[0] : ''
                this.searchForm.endTime=this.value ? this.value[1] : ''
                // console.log(this.searchForm);
                this.searchForm.startPage = 0
                this.getNums();
                this.getPageData();
                this.resetForm()

            },
            //获取信息
            getPageData(){
                selectAllData(this.searchForm).then(res=>{
                    // console.log("睡觉睡觉睡觉", parseInt(res.data.obj.status) === 1)
                    // parseInt(res.data.obj.status) === 1 ? res.data.obj.status=true : res.data.obj.status=false
                    this.pageData=res.data.obj

                }).catch(err=>{
                    this.$message({message:"系统错误",type:"error"})
                })
            },

            /**页码相关*/
            handleSizeChange(val) {

                this.searchForm.pageSize = val
                this.getPageData();
            },
            handleCurrentChange(val) {

                this.searchForm.startPage = val-1
                this.getPageData();
            },

            //获取页码
            getNums(){
                selectAllNums(this.searchForm).then(res=>{
                    console.log("查询数据",res)
                    this.totalNum = res.data.obj
                }).catch(err=>{
                    this.$message({message:'系统错误'})
                })
            },

            //改变禁用状态
            changeStatus(data,index){
                console.log("状态",data)
                editRetailer(data).then(res=>{
                    console.log("修改返回的消息",res)
                    if (res.data.code === 200){
                        this.$message({message:"修改成功",type:'success'});
                        // this.$set(this.pageData[index],this.rowData)
                    }else{
                        this.$message({message:"修改失败",type:'success'})
                    }
                    this.rowData = {}
                    this.dialogVisible = false;
                }).catch(err=>{
                    this.$message({message:"系统错误",type:"error"})
                })

            },

            //重置搜索框
            resetForm(){
                this.searchForm = {
                    name:'',
                    telephone:'',
                    address:'',
                    status:'',
                    createTime:'',
                    startPage:'1',
                    pageSize:'10',
                    startTime:'',
                    endTime:'',
                }
            },
            //重置添加搜索框
            resetAddForm(){
                this.addData= {
                    name:'',
                    telephone:'',
                    address:'',
                    status:true,
                    createTime:'',
                    startPage:'0',
                    pageSize:'10',
                    startTime:'',
                    endTime:'',
                }
            }
        }
    }
</script>

<style scoped lang="scss">
    .block{
        position: relative;
        top: -10px;

    }
    .top-div{
        width: 100%;
        display: flex;
        justify-content: space-between;
    }
    .two_div{
        width: 70%;
        display: flex;
        justify-content: space-between;

    }
    .block-bottom{
        position: absolute;
        bottom: 10px;
        left: 18%;
    }
    .table-box{
        height: 530px;
        background: orange;
        overflow: auto;

    }

</style>
